<script setup lang="ts">
import { computed, ref, watch } from "vue";
import vkDataGoodsSkuPopup from "../../../../components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue";
import { GoodsSku } from "@/types/goods";
import { postMemberCart } from '../../../../apis/goods'
const props = defineProps<{ buttonType: string, modelValue: boolean, skuMessage: GoodsSku, mode: string, addAddressId: string }>()
const ModeNumber = computed(() => {
  if (props.mode === 'modeTwo') {
    return 2
  } else if (props.mode === 'modeThree') {
    return 3
  } else {
    return 1
  }
})
// const goCart = () => {
//   uni.navigateTo({
//     url: '/pages/cart/default/index',
//   })
// }

// const goOrder = () => {
//   uni.navigateTo({
//     url: '/pages/order/create/index',
//   })
// }
// const goodsInfo = {
//   "_id": "003",
//   "name": "迪奥香水",
//   "goods_thumb": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
//   "sku_list": [
//     {
//       "_id": "006",
//       "goods_id": "003",
//       "goods_name": "迪奥香水",
//       "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
//       "price": 19800,
//       "sku_name_arr": ["默认"],
//       "stock": 100
//     }
//   ],
//   "spec_list": [
//     {
//       "list": [
//         {
//           "name": "默认"
//         }
//       ],
//       "name": "默认"
//     }
//   ]
// }
// const skuKey = ref<boolean>(true)
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void, (e: 'sendMsg', value: any): void }>()
const changesku = (e: any) => {
  // console.log('[ e ] >', e)
  emit('update:modelValue', e)
}
const addCart = async (selectShop: any) => {
  await postMemberCart({ count: selectShop.buy_num, skuId: selectShop._id })
  uni.showToast({ title: '加入购物车成功' })
  emit('update:modelValue', false)
  // uni.navigateTo({ url: "/pages/cart/default" });
}
const buyNow = async (selectShop: any) => {
  if (!props.addAddressId) return uni.showToast({ title: '请选择地址', icon: 'none' })
  // console.log(selectShop, 'selectShop');

  uni.navigateTo({
    url: `/pages/order/create/index?skuId=${selectShop._id}&count=${selectShop.buy_num}&addressId=${props.addAddressId}`,
    // events: {
    //   skuId: selectShop._id,
    //   count: selectShop.buy_num,
    //   addressId: props.addAddressId
    // }
  })
}
const skuPopup = ref("skuPopup")
const close = () => {
  emit('sendMsg', { msg: skuPopup.value.selectShop.sku_name_arr, count: skuPopup.value.selectNum })
}
</script>

<template>
  <vk-data-goods-sku-popup ref="skuPopup" :localdata="skuMessage" :modelValue="modelValue" @update:modelValue="changesku"
    border-radius="20" @add-cart="addCart" @buy-now="buyNow" @close="close" :mode="ModeNumber"></vk-data-goods-sku-popup>
  <!-- <view class="header">
      <image
        class="thumb"
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg"
      ></image>
      <view class="wrap">
        <view class="price">
          <view class="discount">
            <text class="symbol">¥</text>
            <text class="number">129</text>
            <text class="decimal">.00</text>
          </view>
          <view class="original">
            <text class="symbol">¥</text>
            <text class="number">199</text>
            <text class="decimal">.00</text>
          </view>
        </view>
        <view class="extra">
          <text class="text">重量: 0.2kg</text>
          <text class="text">编号: 676587698</text>
        </view>
      </view>
    </view>

    <view class="body">
      <view class="specs">
        <view class="label">颜色</view>
        <view class="section">
          <view class="item checked">白色</view>
          <view class="item">黑色</view>
          <view class="item">灰色</view>
          <view class="item">卡其色</view>
        </view>
        <view class="label">类型</view>
        <view class="section">
          <view class="item">红外体温计</view>
          <view class="item disabled">双模</view>
          <view class="item">灵敏</view>
          <view class="item">便携式</view>
        </view>
      </view>
      <view class="number">
        <view class="label">数量</view>
        <view class="counter">
          <text class="text disabled">-</text>
          <input type="text" class="input" value="1" />
          <text class="text">+</text>
        </view>
      </view>
    </view>
    <view class="footer">
      <view @tap="goCart" v-if="buttonType === 'cart'" class="button secondary"
        >加入购物车</view
      >
      <view v-else @tap="goOrder" class="button primary">立即购买</view>
    </view> -->
</template>

<style>
.header {
  display: flex;
  padding: 30rpx 0 !important;
}

.header .thumb {
  width: 180rpx;
  height: 180rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.header .wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header .price {
  display: flex;
  align-items: baseline;
}

.header .price .discount {
  font-size: 40rpx;
  color: #cf4444;
}

.header .price .original {
  font-size: 28rpx;
  margin-left: 20rpx;
  color: #999;
  text-decoration: line-through;
}

.header .symbol,
.header .decimal {
  font-size: 70%;
}

.header .extra {
  margin-bottom: 10rpx;
  font-size: 22rpx;
  color: #666;
}

.header .extra .text {
  margin-right: 10rpx;
}

.body {
  height: 540rpx !important;
  overflow: auto;
}

.body .label {
  margin: 10rpx 0 20rpx;
  color: #333;
  font-weight: 500;
  font-size: 26rpx;
}

.body .specs .section {
  overflow: hidden;
}

.body .specs .item {
  min-width: 100rpx;
  text-align: center;
  line-height: 1;
  padding: 10rpx 30rpx;
  margin: 0 20rpx 20rpx 0;
  border-radius: 50rpx;
  color: #444;
  font-size: 26rpx;
  border: 1rpx solid #f3f4f4;
  background-color: #f3f4f4;
  float: left;
}

.body .specs .checked {
  color: rgba(39, 186, 155, 0.8);
  border: 1rpx solid rgba(39, 186, 155, 0.3);
  background-color: rgba(39, 186, 155, 0.1);
}

.body .specs .disabled {
  opacity: 0.6;
  border: 1rpx dashed #999;
}

.body .number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  margin-top: 30rpx;
}

.body .number .counter {
  display: flex;
}

.body .counter .input {
  display: block;
  width: 100rpx;
  height: 48rpx;
  text-align: center;
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #444;
  background-color: #f6f6f6;
}

.body .counter .text {
  display: block;
  width: 48rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-size: 32rpx;
}

.body .counter .disabled {
  color: #999;
}
</style>
